<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>WebSocket</title>
</head>
<body>
<h1>WebSocket RabbitMQ demo</h1>
<div style="width: 800px;margin: 0 auto;">
    <fieldset>
        <legend>连接websocket</legend>
        <section>
            <button id="connect">连接</button>
        </section>
    </fieldset>
    <fieldset>
        <legend>测试功能</legend>
        <section>
            <button id="exchangeBtn">/exchange demo</button>
            <button id="queueBtn">/queue demo</button>
            <button id="amqQueueBtn">/amq/queue demo</button>
            <button id="topicBtn">/topic demo</button>
        </section>
    </fieldset>
    <div id="exchangeBtn_div" style="display: none;" class="demo_container">
        <h2>/exchange demo</h2>
        <fieldset>
            <legend>设置订阅地址</legend>
            <section>
                <label>订阅地址：</label>
                <select id="subscribe-uri">
                    <option></option>
                    <option value="/exchange/ws.rabbit.exchange.topic/animal.#">
                        /exchange/ws.rabbit.exchange.topic/animal.#
                    </option>
                    <option value="/exchange/ws.rabbit.exchange.topic/animal.*">
                        /exchange/ws.rabbit.exchange.topic/animal.*
                    </option>
                </select>
                <button id="subscribe">订阅</button>
            </section>
        </fieldset>
        <fieldset>
            <legend>直接发送到MQ</legend>
            <section>
                <em>用来测试将消息发送到mq，各个客户端的接收情况</em><br>
                <label>routing key：</label>
                <select id="routingKey">
                    <option></option>
                    <option value="animal.#">animal.#</option>
                    <option value="animal.*">animal.*</option>
                </select>
                <label>消息内容：</label>
                <input id="contentMq" style="width: 40%;"/>
                <button id="send2mq">发送到mq</button>
            </section>
        </fieldset>
        <fieldset>
            <legend>发送消息</legend>
            <section>
                <label>消息内容：</label>
                <input id="content" style="width: 100%; height: 50px;"/>
                <button id="send1">send2mifei</button>
                <button id="send2">send2peppa</button>
            </section>
        </fieldset>
    </div cla>
    <div id="queueBtn_div" style="display: none;" class="demo_container">
        <h2>/queue demo</h2>
        <fieldset>
            <legend>设置订阅地址</legend>
            <section>
                <label>订阅地址：</label>
                <select id="subscribe-uri">
                    <option value="/queue/ws.rabbit.queue.destination">
                        /queue/ws.rabbit.queue.destination
                    </option>
                </select>
                <button id="subscribe">订阅</button>
            </section>
        </fieldset>
        <fieldset>
            <legend>直接发送到MQ</legend>
            <section>
                <em>用来测试将消息发送到mq，各个客户端的接收情况</em><br>
                <label>routing key：</label>
                <select id="routingKey">
                    <option></option>
                </select>
                <label>消息内容：</label>
                <input id="contentMq" style="width: 40%;"/>
                <button id="send2mq">发送到mq</button>
            </section>
        </fieldset>
        <fieldset>
            <legend>发送消息</legend>
            <section>
                <label>消息内容：</label>
                <input id="content" style="width: 100%; height: 50px;"/>
                <button id="send">send</button>
            </section>
        </fieldset>
    </div>
    <div id="amqQueueBtn_div" style="display: none;" class="demo_container">
        <h2>/amq/queue demo</h2>
        <fieldset>
            <legend>设置订阅地址</legend>
            <section>
                <label>订阅地址：</label>
                <select id="subscribe-uri">
                    <option value="/amq/queue/ws.rabbit.amq.queue.destination">
                        /amq/queue/ws.rabbit.amq.queue.destination
                    </option>
                </select>
                <button id="subscribe">订阅</button>
            </section>
        </fieldset>
        <fieldset>
            <legend>直接发送到MQ</legend>
            <section>
                <em>用来测试将消息发送到mq，各个客户端的接收情况</em><br>
                <label>routing key：</label>
                <select id="routingKey">
                    <option></option>
                </select>
                <label>消息内容：</label>
                <input id="contentMq" style="width: 40%;"/>
                <button id="send2mq">发送到mq</button>
            </section>
        </fieldset>
        <fieldset>
            <legend>发送消息</legend>
            <section>
                <label>消息内容：</label>
                <input id="content" style="width: 100%; height: 50px;"/>
                <button id="send">send</button>
            </section>
        </fieldset>
    </div>
    <div id="topicBtn_div" style="display: none;" class="demo_container">
        <h2>/topic demo</h2>
        <fieldset>
            <legend>设置订阅地址</legend>
            <section>
                <label>订阅地址：</label>
                <select id="subscribe-uri">
                    <option></option>
                    <option value="/topic/*.debug.*">
                        /topic/*.debug.*
                    </option>
                    <option value="/topic/*.info.*">
                        /topic/*.info.*
                    </option>
                </select>
                <button id="subscribe">订阅</button>
            </section>
        </fieldset>
        <fieldset>
            <legend>直接发送到MQ</legend>
            <section>
                <em>用来测试将消息发送到mq，各个客户端的接收情况</em><br>
                <label>routing key：</label>
                <select id="routingKey">
                    <option></option>
                    <option value="*.info.*">*.info.*</option>
                    <option value="*.debug.*">*.debug.*</option>
                </select>
                <label>消息内容：</label>
                <input id="contentMq" style="width: 40%;"/>
                <button id="send2mq">发送到mq</button>
            </section>
        </fieldset>
        <fieldset>
            <legend>发送消息</legend>
            <section>
                <label>消息内容：</label>
                <input id="content" style="width: 100%; height: 50px;"/>
                <button id="send1">send2debug</button>
                <button id="send2">send2info</button>
            </section>
        </fieldset>
    </div>
    <fieldset>
        <label>收到的消息：</label>
        <div id="message" style="border: 1px solid #eee;min-height: 100px;background-color: #eee"></div>
        <legend>收到的错误信息</legend>
        <section>
            <label>错误信息：</label>
            <div id="error" style="border: 1px solid wheat;min-height: 100px;background-color: wheat"></div>
        </section>
    </fieldset>
</div>

<!--jquery-->
<script src="https://cdn.bootcss.com/jquery/2.1.0/jquery.min.js"></script>
<!--stomp js-->
<script src="https://cdn.bootcss.com/stomp.js/2.3.3/stomp.js"></script>
<!--sockjs-client-->
<script src="https://cdn.bootcss.com/sockjs-client/1.4.0/sockjs.js"></script>
<script type="application/javascript">
    $(function () {
        var ws;
        var exchangeBtn = $('#exchangeBtn');
        var queueBtn = $('#queueBtn');
        var amqQueueBtn = $('#amqQueueBtn');
        var topicBtn = $('#topicBtn');
        var exchangeBtn_div = $('#exchangeBtn_div');
        var queueBtn_div = $('#queueBtn_div');
        var amqQueueBtn_div = $('#amqQueueBtn_div');
        var topicBtn_div = $('#topicBtn_div');

        var $connect = $('#connect');
        var $message = $('#message');
        var $content = $('#content');
        var $error = $('#error');
        var connected = false;

        exchangeBtn.click(function () {
            exchangeBtn_div.css('display', 'block');
            queueBtn_div.css('display', 'none');
            amqQueueBtn_div.css('display', 'none');
            topicBtn_div.css('display', 'none');
            reset(exchangeBtn_div);
            registerEvent(exchangeBtn_div, 1);
        });
        queueBtn.click(function () {
            exchangeBtn_div.css('display', 'none');
            queueBtn_div.css('display', 'block');
            amqQueueBtn_div.css('display', 'none');
            topicBtn_div.css('display', 'none');
            reset(queueBtn_div);
            registerEvent(queueBtn_div, 2);
        });
        amqQueueBtn.click(function () {
            exchangeBtn_div.css('display', 'none');
            queueBtn_div.css('display', 'none');
            amqQueueBtn_div.css('display', 'block');
            topicBtn_div.css('display', 'none');
            registerEvent(amqQueueBtn_div, 3);
        });
        topicBtn.click(function () {
            exchangeBtn_div.css('display', 'none');
            queueBtn_div.css('display', 'none');
            amqQueueBtn_div.css('display', 'none');
            topicBtn_div.css('display', 'block');
            reset(topicBtn_div);
            registerEvent(topicBtn_div, 4);
        });

        $connect.click(function () {
            if (connected) {
                disconnect();
            } else {
                connect();
            }
        });

        function registerEvent(div, type) {
            div.find('#subscribe').click(function () {
                let su = div.find('#subscribe-uri').val();
                if (su) {
                    showMessage('已经订阅：' + su);
                    // 订阅聊天内容
                    ws.subscribe(su, function (data) {
                        showMessage(data.body);
                    });
                }
            });

            div.find('#send').click(function () {
                if (div.find('#content').val()) {
                    if (type === 2) {
                        ws.send('/app/queue', {}, div.find('#content').val());
                    } else if (type === 3) {
                        ws.send('/app/amq/queue', {}, div.find('#content').val());
                    }
                }
            });

            div.find('#send1').click(function () {
                if (div.find('#content').val()) {
                    if (type === 1) {
                        ws.send('/app/send2mifei', {}, div.find('#content').val());
                    } else if (type === 4) {
                        ws.send('/app/topic/debug', {}, div.find('#content').val());
                    }
                }
            });

            div.find('#send2').click(function () {
                if (div.find('#content').val()) {
                    if (type === 1) {
                        ws.send('/app/send2peppa', {}, div.find('#content').val());
                    } else if (type === 4) {
                        ws.send('/app/topic/info', {}, div.find('#content').val());
                    }
                }
            });

            div.find('#send2mq').click(function () {
                let contentMq = div.find('#contentMq').val();
                if (contentMq)
                    $.post('/send2mq', {
                        routingkey: div.find('#routingKey').val(),
                        content: contentMq,
                        type: type
                    }, function (d) {
                        console.log(d);
                    });
            });
        }

        function reset(div) {
            $message.text('');
            $error.text('');
        }

        function connect() {
            var socket = new SockJS('/websocket');
            ws = Stomp.over(socket);
            // 传递header信息，用来后台登录认证
            ws.connect({}, function (frame) {
                setConnected(true);
                console.log("connected : " + frame);
                // 订阅错误信息
                ws.subscribe('/queue/errors', function (data) {
                    console.log("error : " + data);
                    showError(data.body);
                });
            }, function (error) {
                console.log("STOMP error : " + error);
            });
        }

        function disconnect() {
            if (ws != null) {
                ws.disconnect();
            }
            setConnected(false);
        }

        function setConnected(b) {
            connected = b;
            if (b) {
                $connect.text('退出');
            } else {
                $connect.text('连接');
            }
        }

        function showMessage(message) {
            $message.append("<br>" + message);
        }

        function showError(message) {
            $error.append("<br>" + message);
        }
    });
</script>
</body>
</html>